<template>
	<view style="position: absolute;">
		<view class="topTitle" :style="[{'height': actionHeight},{'background-color':actionClolor}]">
			<view style="display: flex;flex-direction: column; bottom: 0;position: absolute;width: 100%;">
				<view :v-if="!customTitle" class="row verticalCenterInRow " :style="[{'height':statusBarHeight}]">
					<view v-if="showBackIcon" style="width: 60rpx;">
						<view class="iconfont icon-fanhui" style="padding-left: 20rpx;" @click="back"></view>
					</view>
					<view :class="[titleCenter ? 'center' : '']">
						<view class="titleText" :style="{'color':titleDColor}">{{pageTitle}}</view>
					</view>
					<view style="width: 60rpx;"></view>
				</view>
				<view v-if="customTitle" class="slotView"   :style="{'height':statusBarHeight}">
					<slot name="title"></slot>
				</view>
			</view>
		</view>
	
		<view >
			<view >
				<slot></slot>
			</view>
		</view>
	</view>

</template>
<script>
	export default {
		name: 'v-headerview',
		props: {
			titleColor: {
				type: String,
				default: '#000000'
			},
			actionBarColor: {
				type: String,
				default: '#ffffff'
			},
			pageTitle: '',
			showBackIcon: {
				type: Boolean,
				default: false
			},
			customTitle: {
				type: Boolean,
				default: false
			},
			titleCenter: {
				type: Boolean,
				default: false
			}
		},

		data() {
			return {
				statusBarHeight: '',
				actionHeight: '44px',
				actionClolor: '#ffffff',
				titleDColor: ''
			}
		},
		created() {
			let that = this
			uni.getSystemInfo({
				success(res) {
					that.actionHeight = (res.statusBarHeight * 2 + 90) + 'rpx'
					that.statusBarHeight = '90rpx'
				}
			})
			this.actionClolor = this.actionBarColor + '00'
			this.titleDColor = this.titleColor + '00'
		},

		mounted() {
			var that = this;
			uni.$on('onPageScroll', function(data) { //接收参数
				if (data > 0) {
					if (data <= 255) {
						var alpha = (data).toString(16).split('.')[0]
						if (alpha.length == 1) {
							alpha = '0' + alpha
						}
						that.actionClolor = that.actionBarColor + alpha
						that.titleDColor = that.titleColor + alpha
					} else if (data > 255) {
						that.actionClolor = that.actionBarColor + 'ff'
						that.titleDColor = that.titleColor + 'ff'
					}

				}
			});

		},
		methods: {
			back(){
				uni.navigateBack()
			}

		}
	}
</script>
<style lang="scss">
	.row {
		display: flex;
		flex-direction: row;
	}

	.verticalCenterInRow {
		align-items: center;
		justify-items: center;
		display: flex;
	}

	.topTitle {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 99;
	}

	.tileContent {
		bottom: 0;
	}

	.titleText {
		font-weight: 600;
		font-size: 32rpx;
		margin-left: 20rpx;
	}

	.scoll {
		height: calc(100vh);
	}

	.center {
		flex: 1;
		align-items: center;
		justify-content: center;
		display: flex;
	}
	.slotView{
		align-items: center;
		justify-content: center;
		display: flex;
	}

	/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
	@font-face {
		font-family: 'iconfont';
		/* Project id 4052467 */
		src: url('//at.alicdn.com/t/c/font_4052467_akm2gehw41.woff2?t=1683708618833') format('woff2'),
			url('//at.alicdn.com/t/c/font_4052467_akm2gehw41.woff?t=1683708618833') format('woff'),
			url('//at.alicdn.com/t/c/font_4052467_akm2gehw41.ttf?t=1683708618833') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-fanhui:before {
		content: "\e600";
	}
</style>